{config_load file="global.conf"}
{config_load file="_PerformanceBlock.conf" section="`$lang`"}
{config_load file="_form_calc.conf" section="`$lang`"}



<script type="text/javascript">


var selectedYear;
var selectedMonth;

//starting values for date selector
var startMonthSignal = 1-1; //start month number -1
var startMonthMAP = 6-1; //start month number -1
var startYearSignal = 2008;
var startYearMAP = 2008;

//setting current date
var currService = '{$service}';
var now = new Date();
currMonth = now.getMonth();
currYear = now.getFullYear();

//var defaultYearMAP = currYear;
//var defaultMonthMAP = currMonth;
var defaultYearMAP = 2008;
var defaultMonthMAP = 12;
var defaultYearSignal = 2009;
var defaultMonthSignal = 5;

{literal}
function fillPeriod(){

 	var optionsHTML = '';
 	var mNames = setMnames();
 	var endMonth = 12;

 	if (currService=='maps') {
 		var startYear = startYearMAP;
 		var startMonth = startMonthMAP;
 	} else {
 		var startYear = startYearSignal;
 		var startMonth = startMonthSignal;
 	}

    optionsHTML += '<select name="periodSelector" id="periodSelector" onChange="reloadPerfTable(true);">';
 	for (var i=startYear; i<=currYear; i++){

 		var shortYear = cut2Digits(i);

 		if (i!=startYear) startMonth=0;
 		if (i==currYear) endMonth = currMonth;
        //alert(i+' '+startMonth+' '+endMonth)
 		for (var j=startMonth; j<endMonth; j++){
	 		optionsHTML += '<option value="'+(j+1)+'_'+(i)+'">';
	 		optionsHTML += mNames[j]+' '+shortYear;
	 		optionsHTML += '</option>';

	 		//defaultYearMAP = i;
			//defaultMonthMAP = (j+1);
			//defaultYearSignal = i;
			//defaultMonthSignal = (j+1);
 		}
 	}
 	optionsHTML += '</select>';
    //alert(optionsHTML)
    document.getElementById('periodContainer').innerHTML = optionsHTML;
  	return true;
}

function setMnames(){
     {/literal}
     var mNames = new Array('{#_form_calc__mnthJan#}{*Jan*}',
                            '{#_form_calc__mnthFeb#}{*Feb*}',
                            '{#_form_calc__mnthMar#}{*Mar*}',
                            '{#_form_calc__mnthApr#}{*Apr*}',
                            '{#_form_calc__mnthMay#}{*May*}',
                            '{#_form_calc__mnthJun#}{*Jun*}',
                            '{#_form_calc__mnthJul#}{*Jul*}',
                            '{#_form_calc__mnthAug#}{*Aug*}',
                            '{#_form_calc__mnthSep#}{*Sep*}',
                            '{#_form_calc__mnthOct#}{*Oct*}',
                            '{#_form_calc__mnthNov#}{*Nov*}',
                            '{#_form_calc__mnthDec#}{*Dec*}');
     {literal}
	 return mNames;
}

function cut2Digits(fullYear){
	fullYear = '"'+fullYear+'"'
 	shortYear = fullYear.charAt(3)+fullYear.charAt(4);
	return shortYear;
}

function reloadPerfTable(){
	emptyPerfContainer();
	setSelectedPeriod(true);
	if (currService=='maps') {
 		xajax_showPerfMaps( selectedYear, selectedMonth );
 	} else {
 		xajax_showPerfSignals( selectedYear, selectedMonth );
 	}
  	return true;
}

function setService(service) {
	currService = service;
	setServiceStyle();
	emptyPerfContainer();
	fillPeriod();
	setSelectedPeriod();
	//alert (currService);
}

function setServiceStyle() {
	if (currService=='maps') {
		document.getElementById('servicemaps').className="serviceActive";
		document.getElementById('servicesignals').className="serviceInactive";
		document.getElementById('linksSignal').style.display='none';
		document.getElementById('linksMap').style.display='inline';
	} else {
     	document.getElementById('servicemaps').className="serviceInactive";
		document.getElementById('servicesignals').className="serviceActive";
		document.getElementById('linksMap').style.display='none';
		document.getElementById('linksSignal').style.display='inline';
	}
	//alert (currService);
}

function setSelectedPeriod(reloading) {
	if (!reloading){
		if (currService=='maps') {
			document.getElementById('periodSelector').value = defaultMonthMAP+'_'+defaultYearMAP;
		} else {
	     	document.getElementById('periodSelector').value = defaultMonthSignal+'_'+defaultYearSignal;
		}
	}
   	selectedPeriod = document.getElementById('periodSelector').value;
   	selectedPeriodItems = selectedPeriod.split('_');
   	selectedYear = selectedPeriodItems[1];
	selectedMonth = selectedPeriodItems[0];
	//alert( selectedPeriodItems[0]+selectedPeriodItems[1] );
}

function emptyPerfContainer() {
	//document.getElementById('divPerfTable').innerHTML = "";
	document.getElementById('divTracksMain').innerHTML = "";
}


function emptyFunc() {
}

function showStrobber() {
	xajax.$('loadMessage').style.display='block';
}

function hideStrobber() {
	xajax.$('loadMessage').style.display='none';
}

function afterBodyLoaded(){
	setService('signals');
	setServiceStyle();
	fillPeriod();
	setSelectedPeriod(false);

	if (currService=='maps') {
		xajax_showPerfMaps( selectedYear, selectedMonth);
	} else {
		xajax_showPerfSignals( selectedYear, selectedMonth);
	}

	xajax.loadingFunction = showStrobber;
	xajax.doneLoadingFunction = hideStrobber;
	//xajax.loadingFunction = showLoadingMessage;
	//xajax.doneLoadingFunction = hideLoadingMessage;
}

addLoadEvent(afterBodyLoaded);

{/literal}
</script>

<span>
<h3>Recent Performance</h3>

<table class="dasboard"  id="tabl_perf" border="0" width="98%" height="175" name="tabl_perf" style="border: #ddd 1px solid" cellpadding="2" cellspacing="0">
<tr height="25">
	<td width="120" id="servicemaps" align="center"><nobr>&nbsp;<span onclick="setService('maps'); xajax_showPerfMaps( selectedYear, selectedMonth )">{#_PerformanceBlock__labelMAP#}</span>&nbsp;</nobr></td>
	<td id="servicesignals" align="center"><nobr>&nbsp;<span onclick="setService('signals'); xajax_showPerfSignals( selectedYear, selectedMonth )">{#_PerformanceBlock__labelSignal#}</span>&nbsp;</nobr></td>
<tr>
<tr>
	<td height="30" align="left">
		<nobr>&nbsp;&nbsp;&nbsp;{#_PerformanceBlock__labelPeriod#}&nbsp;
    	<span id="periodContainer">&nbsp;</span></nobr>
	</td>
<tr>
<tr>
	<td colspan="2" valign="top" align="center">
		<div id="loadMessage" style="display: none;">
  		<br><img src="{#images_dir#}/loading.gif">&nbsp;{#_PerformanceBlock__labelLoading#}<br></div>
        <!--<div id="divPerfTable">&nbsp;</div>-->
  		<div id="divTracksMain">&nbsp;</div>
    </td>
</tr>
<tr>
	<td colspan="2" style="border-top: #eee 1px solid"  height="25"><nobr><img src="{#images_dir#}/breadcrumb_arrow.gif" />&nbsp;
		<span id="linksSignal" style="display:none">
        <a href="/{$lang}/track-record.html">{#_PerformanceBlock__labelTrack#}</a> |
        <a href="/{$lang}/performance-calculator.html">{#_PerformanceBlock__labelCalc#}</a></span>
        <span id="linksMap">
        <a href="/{$lang}/managed-accounts-overview.html">{#_PerformanceBlock__labelPerf#}</a></span>
    </nobr></td>
</tr>
</table>
 </span>



<script type="text/javascript">
<!--
//setInterval("reloadPerfTable();", 120000); // Auto update

// -->
</script>


